<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="shortcut icon" href="favicon.ico">
    <title>战斗模拟器（夏吉尔）</title>
    <link rel="stylesheet" href="css/style_simulator.css">
</head>

<body>
    <canvas height="100%" width="100%" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 1;"
        id="canvas"></canvas>
    <div id="app">

        <div class="center-container">
            <div class="title">战斗模拟主神专用</div>
            <div class="left btn-list">
                <el-tooltip content="怪物查看" placement="left" effect="dark" class="btn">
                    <el-button icon="el-icon-notebook-2" class="btn" circle @click="show(1)"></el-button>
                </el-tooltip>
                <el-tooltip content="人物数据查看" placement="left" effect="dark" class="btn">
                    <el-button icon="el-icon-present" circle @click="show(2)"></el-button>
                </el-tooltip>
            </div>
            <div class="content">
                <div class="top">
                    <el-button size="medium" type="primary" @click="">下一回合</el-button>
                    <!-- 战斗盒子 -->
                    <div class="fight-box mx-3">
                        <el-row>
                            <el-col :span="6"><div class="grid-content bg-purple">
                                <el-card class="box-card h-100">
                                    <div slot="header" class="clearfix">
                                      <span>角色卡</span>
                                      <el-button style="float: right; padding: 3px 0" type="text"  @click="">添加状态</el-button>
                                    </div>
                                    <el-tag
                                    class="mt-2 mr-2"
                                    :key="tag"
                                    v-for="tag in dynamicTags"
                                    :disable-transitions="false"
                                    @click="editTag(tag)"
                                    effect="dark"
                                    size="mini"
                                    >
                                    {{tag.name+'('+tag.time+')'}}
                                    </el-tag>
                                    <el-input
                                    class="input-new-tag"
                                    v-if="inputVisible"
                                    v-model="inputValue"
                                    ref="saveTagInput"
                                    size="small"
                                    @keyup.enter.native="handleInputConfirm"
                                    @blur="handleInputConfirm"
                                    >
                                    </el-input>
                                    <!-- <el-button v-else class="button-new-tag" size="mini" @click="showInput">+ New Tag</el-button> -->
                                    <el-descriptions class="mt-2" :column="2" size="mini" border>
                                        <el-descriptions-item>
                                            <template slot="label">
                                              hp
                                            </template>
                                            11
                                          </el-descriptions-item>
                                          <el-descriptions-item>
                                            <template slot="label">
                                              mp
                                            </template>
                                            11
                                          </el-descriptions-item>
                                          <el-descriptions-item>
                                            <template slot="label">
                                              护甲
                                            </template>
                                            22
                                          </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template slot="label">
                                            力量
                                          </template>
                                          11
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template slot="label">
                                            体质
                                          </template>
                                          11
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template slot="label">
                                            魅力
                                          </template>
                                          22
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                            <template slot="label">
                                              力量
                                            </template>
                                            11
                                          </el-descriptions-item>
                                          <el-descriptions-item>
                                            <template slot="label">
                                              体质
                                            </template>
                                            11
                                          </el-descriptions-item>
                                          <el-descriptions-item>
                                            <template slot="label">
                                              魅力
                                            </template>
                                            22
                                          </el-descriptions-item>
                                      </el-descriptions>
                                  </el-card>
                            </div></el-col>
                            <el-col :span="12"><div class="grid-content bg-purple-light">
                                <div class="chessboard">
                                    <!--上方棋盘-->
                                    <div class="row npc">
                                        <div v-for="(item,index) in chess_npc" :key="item.id" :class="item.active?'item active':'item'" @click="onChoose(1,index)">{{item.id}}</div>

                                    </div>
                            
                                    <div class="row firewall">
                                        <span>阻隔栏</span>
                                    </div>
                                    <!--中立阵营-->
                                    <div class="row">
                                        <div class="item" v-for="item in 5">召唤位</div>
                                    </div>
                                    <div class="row">
                                        <div class="item" v-for="item in 5">召唤位</div>
                                    </div>
                                    <div class="row firewall"><span>阻隔栏</span></div>
                                    <!--下方棋盘-->
                                    <div class="row pc">
                                        <div v-for="(item,index) in chess_pc" :key="item.id" :class="item.active?'item active':'item'" @click="onChoose(2,index)">{{item.id}}</div>

                                    </div>
                                </div>
                            </div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                          </el-row>
                    </div>
                    
                    
                    <div class="res">
                        <div style="display: flex;margin-right: 10px;">
                            <el-input :placeholder="start" v-model="start">
                                <template slot="prepend">随机最低</template>
                            </el-input>
                            <el-input :placeholder="end" v-model="end" style="margin-left:4px">
                                <template slot="prepend">随机最高</template>
                            </el-input>
                        </div>
                        <el-button size="medium" type="primary" @click="suiji">随机数生成</el-button>
                        
                    </div>
                    <p style="color: #ffffff;" v-if="result"> 随机数：{{result}}</p>    
                </div>
                
                <div class="data">
                    <el-row>
                        <p style="color: #ffffff;"> 当前npc 【{{npcData.name}}】 评分：{{npcData.levelNum}}</p>
                        <p style="color: #ffffff;"> 当前pc 【{{plData.name}}】 评分：{{plData.levelNum}}</p>
                        <el-col :span="12">
                            
                            <el-select v-model="npcName" placeholder="NPC导入" @change="onSelect">
                                <el-option v-for="item in npcList" :key="item.id" :label="item.name" :value="item">
                                </el-option>
                            </el-select>
                            <div style="display: flex;margin-top: 10px;">
                                <el-input :placeholder="npcData.hp" v-model="npcData.hp">
                                    <template slot="prepend">hp</template>
                                </el-input>
                                <el-input :placeholder="npcData.mp" v-model="npcData.mp" style="margin-left:4px">
                                    <template slot="prepend">mp</template>
                                </el-input>
                                
                            </div>
                            <div style="display: flex;margin-top: 10px;">
                                <el-input :placeholder="npcData.str" v-model="npcData.str">
                                    <template slot="prepend">力量</template>
                                </el-input>
                                <el-input :placeholder="npcData.con" v-model="npcData.con" style="margin-left:4px">
                                    <template slot="prepend">体质</template>
                                </el-input>
                                
                            </div>
                            <div style="display: flex;margin-top: 10px;">
                                <el-input :placeholder="npcData.dex" v-model="npcData.dex" style="margin-left:4px">
                                    <template slot="prepend">敏捷</template>
                                </el-input>
                                <el-input :placeholder="npcData.mag" v-model="npcData.mag">
                                    <template slot="prepend">精神</template>
                                </el-input>
                            </div>
                            <div style="display: flex;margin-top: 10px;">
                                <el-input :placeholder="npcData.chr" v-model="npcData.chr" style="margin-left:4px">
                                    <template slot="prepend">魅力</template>
                                </el-input>
                                <el-input :placeholder="npcData.ler" v-model="npcData.ler" style="margin-left:4px">
                                    <template slot="prepend">智力</template>
                                </el-input>
                            </div>
                            <div style="display: flex;margin-top: 10px;">
                                <el-input :placeholder="npcData.level" v-model="npcData.level">
                                    <template slot="prepend">等级</template>
                                </el-input>
                                <el-input :placeholder="npcData.hujia" v-model="npcData.hujia" style="margin-left:4px">
                                    <template slot="prepend">护甲</template>
                                </el-input>
                                
                            </div>
                            <div style="display: flex;margin-top: 10px;">
                                <el-input :placeholder="npcData.damageup" v-model="npcData.damageup">
                                    <template slot="prepend">伤害上限</template>
                                </el-input>
                                <el-input :placeholder="npcData.damagedown" v-model="npcData.damagedown" style="margin-left:4px">
                                    <template slot="prepend">伤害下限</template>
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <el-select v-model="plName" placeholder="PC导入" @change="onSelect">
                                <el-option v-for="item in plList" :key="item.id" :label="item.name" :value="item">
                                </el-option>
                            </el-select>
                            <div style="display: flex;margin-top: 10px;">
                                <el-input :placeholder="plData.hp" v-model="plData.hp">
                                    <template slot="prepend">hp</template>
                                </el-input>
                                <el-input :placeholder="plData.mp" v-model="plData.mp" style="margin-left:4px">
                                    <template slot="prepend">mp</template>
                                </el-input>
                                
                            </div>
                            <div style="display: flex;margin-top: 10px;">
                                <el-input :placeholder="plData.str" v-model="plData.str">
                                    <template slot="prepend">力量</template>
                                </el-input>
                                <el-input :placeholder="plData.con" v-model="plData.con" style="margin-left:4px">
                                    <template slot="prepend">体质</template>
                                </el-input>
                                
                            </div>
                            <div style="display: flex;margin-top: 10px;">
                                <el-input :placeholder="plData.dex" v-model="plData.dex">
                                    <template slot="prepend">敏捷</template>
                                </el-input>
                                <el-input :placeholder="plData.mag" v-model="plData.mag" style="margin-left:4px">
                                    <template slot="prepend">精神</template>
                                </el-input>
                            </div>
                            <div style="display: flex;margin-top: 10px;">
                                <el-input :placeholder="plData.chr" v-model="plData.chr" >
                                    <template slot="prepend">魅力</template>
                                </el-input>
                                <el-input :placeholder="plData.ler" v-model="plData.ler" style="margin-left:4px">
                                    <template slot="prepend">智力</template>
                                </el-input>
                            </div>
                            <div style="display: flex;margin-top: 10px;">
                                <el-input :placeholder="plData.level" v-model="plData.level">
                                    <template slot="prepend">等级</template>
                                </el-input>
                                <el-input :placeholder="plData.hujia" v-model="plData.hujia" style="margin-left:4px">
                                    <template slot="prepend">护甲</template>
                                </el-input>
                                
                            </div>
                            <div style="display: flex;margin-top: 10px;">
                                <el-input :placeholder="plData.damageup" v-model="plData.damageup">
                                    <template slot="prepend">伤害上限</template>
                                </el-input>
                                <el-input :placeholder="plData.damagedown" v-model="plData.damagedown" style="margin-left:4px">
                                    <template slot="prepend">伤害下限</template>
                                </el-input>
                            </div>
                        </el-col>
                    </el-row>



                    <div style="line-height: 40px; color: #fff;">攻击系数:</div>
                    <div style="display: flex;margin-top: 10px;">
                        <el-input placeholder="精准判定" v-model="jzpd">
                            <template slot="prepend">精准判定</template>
                        </el-input>
                        <el-input placeholder="部位判定" v-model="bwpd" style="margin-left:4px">
                            <template slot="prepend">部位判定</template>
                        </el-input>
                        <el-input placeholder="伤害判定" v-model="shpd" style="margin-left:4px">
                            <template slot="prepend">伤害判定</template>
                        </el-input>
                    </div>


                    <div class="history">
                    </div>
                </div>



            </div>
        </div>


        <el-dialog title="抽奖规则" :visible="showrule" width="60%" :before-close="handleClose">
            <p>战斗机制</p>
            <p>战斗数值换算</p>
            <p>mp：精神/3</p>
            <p>mp/回合：精神/10+附加点数</p>
            <p>白色法术【精神5以上】：每回合消耗1-3点</p>
            <p>绿色法术：每回合消耗3-5点</p>
            <p>蓝色法术：每回合消耗5-15点</p>
            <p>紫色法术：每回合消耗15-50点</p>
            <p>橙色法术：每回合消耗50-~</p>
            <!-- <span>{{ruleTXT}}</span> -->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showrule = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>


</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/global.js"></script>
<script src="js/data.js"></script>
<script>
    //奖品列表（注意 奖品id对应奖品名 奖品描述）
    var npc_list = [
        { id: 1, type: 'npc', name: '学徒模型（裸）', str: 5, con: 5, dex: 5, mag: 5, chr: 5, ler: 5,hujia:0,element:1,},
        { id: 2, type: 'npc', name: '学院模型（裸）', str: 10, con: 10, dex: 5, mag: 5, chr: 5, ler: 5,hujia:0,element:1,},
        { id: 3, type: 'npc', name: '神官模型（裸）', str: 20, con: 20, dex: 10, mag: 5, chr: 5, ler: 5,hujia:0,element:1,},
        { id: 4, type: 'npc', name: '主教模型（裸）', str: 50, con: 50, dex: 20, mag: 10, chr: 5, ler: 5,hujia:0,element:1,},
        { id: 5, type: 'npc', name: '史诗模型（裸）', str: 100, con: 100, dex: 50, mag: 20, chr: 10, ler: 10,hujia:0,element:1,},
        { id: 6, type: 'npc', name: '神话模型（裸）', str: 500, con: 100, dex: 50, mag: 20, chr: 10, ler: 10,hujia:0,element:1,},
        { id: 7, type: 'npc', name: '神话巅峰', str: 500, con: 500, dex: 500, mag: 500, chr: 5, ler: 5,hujia:0,element:1,},
        { id: 8, type: 'npc', name: '学院模型-精英装备', str: 5, con: 5, dex: 5, mag: 5, chr: 5, ler: 5,hujia:0,element:1,},

    ]
    //奖品展示列表
    var pl_list = [
         // { id: 3, type: 'pc', name: '花上佳途', str: 7, con: 5, dex: 8, mag: 6, chr: 5, ler: 5,hujia:2,damageup:0,damagedown:0, other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
         { id: 1, type: 'pc', name: '接引人', str: 10, con: 20, dex: 30, mag: 100, chr: 100, ler: 100,hujia:0,damageup:0,damagedown:0, other: '' },
        { id: 2, type: 'pc', name: '阳九', str: 5, con: 5, dex: 5, mag: 8, chr: 5, ler: 50, hujia:0,damageup:0,damagedown:0, other: '' },
        { id: 3, type: 'pc', name: '村民农民', str: 5, con: 8, dex: 5, mag: 5, chr: 5, ler: 5,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 4, type: 'pc', name: '村民工匠', str: 8, con: 5, dex: 5, mag: 5, chr: 5, ler: 5,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 5, type: 'pc', name: '库德', str: 5, con: 5, dex: 5, mag: 5, chr: 10, ler: 5, hujia:0,damageup:0,damagedown:0, other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 6, type: 'pc', name: '卡罗拉', str: 8, con: 8, dex: 5, mag: 5, chr: 8, ler: 5, hujia:0,damageup:0,damagedown:0, other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 7, type: 'pc', name: '德米斯', str: 5, con: 8, dex: 7, mag: 8, chr: 15, ler: 8, hujia:5,damageup:0,damagedown:0, other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 8, type: 'pc', name: '史莱姆', str: 5, con: 5, dex: 5, mag: 5, chr: 5, ler: 5,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 9, type: 'pc', name: '史莱姆宝宝', str: 3, con: 3, dex: 3, mag: 5, chr: 5, ler: 5,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 10, type: 'pc', name: '野猪', str: 6, con: 6, dex: 5, mag: 3, chr: 3, ler: 3,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 11, type: 'pc', name: '幽魂', str: 8, con: 5, dex: 8, mag: 5, chr: 5, ler: 5,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 11, type: 'pc', name: '流浪法师', str: 8, con: 5, dex: 12, mag: 15, chr: 5, ler: 10,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 11, type: 'pc', name: '狗熊', str: 15, con: 5, dex: 8, mag: 5, chr: 5, ler: 5,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 11, type: 'pc', name: '强盗', str: 10, con:8, dex: 5, mag: 5, chr: 5, ler: 5,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 11, type: 'pc', name: '强盗头子', str: 15, con: 10, dex: 10, mag: 5, chr: 5, ler: 5,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 12, type: 'pc', name: '工会考核官-团队', str: 15, con: 15, dex: 15, mag: 5, chr: 5, ler: 5,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 13, type: 'pc', name: '工会考核官-法师', str: 5, con: 5, dex: 5, mag: 10, chr: 5, ler: 5,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 14, type: 'pc', name: '工会考核官-战士', str: 5, con: 10, dex: 5, mag: 5, chr: 5, ler: 5,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 15, type: 'pc', name: '工会考核官-刺客', str: 10, con: 5, dex: 5, mag: 5, chr: 5, ler: 5,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 1, type: 'pc', name: '蕾塞', str: 4, con: 8, dex: 6, mag: 7, chr: 5, ler: 5,hujia:1,damageup:0,damagedown:0, other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 2, type: 'pc', name: '依默托尔', str: 5, con: 5, dex: 7, mag: 7, chr: 6, ler: 11,hujia:2,damageup:0,damagedown:0, other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 4, type: 'pc', name: '阿斯托尔福', str: 27, con: 37, dex: 30, mag: 23, chr: 16, ler: 27,hujia:0,damageup:0,damagedown:0, other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 5, type: 'pc', name: '陆甲', str: 7, con: 8, dex: 6, mag: 6, chr: 8, ler: 6,hujia:1,damageup:0,damagedown:0, other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 6, type: 'pc', name: '凯茵', str: 36, con: 29, dex: 23, mag: 12, chr: 23, ler: 6,hujia:2,damageup:0,damagedown:0, other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 999, type: 'pc', name: '德莱恩·拉尔凡', str: 10, con: 10, dex: 60, mag: 300, chr: 100, ler: 300,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },
        { id: 12, type: 'pc', name: '工会考核官-团队', str: 15, con: 15, dex: 15, mag: 5, chr: 5, ler: 5,hujia:0,damageup:0,damagedown:0,  other: '大地震撼：造成范围伤害1d3,可以闪避，受伤敏捷判定-1' },

    ]
    var ruleTXT = "点抽奖，抽，看记录截图，有时间戳 抽中同一个，时间早的拿到，另一个重抽，完"


    var app = new Vue({
        el: '#app',
        data: {
            showrule: false,
            showaward: false,
            plData: pl_list[0],
            plName: '',
            plList: pl_list,
            ruleTXT: ruleTXT,
            npcData: npc_list[0],
            npcList: npc_list,
            npcName: '',
            jzpd: 0,
            bwpd: 0,
            shpd: 0,
            shanbi: '',
            gedang: '',
            gongji: '',
            start:1,
            end:100,
            result:'',
            dynamicTags: [{name:'标签',time:3}, {name:'标签',time:2}, {name:'标签',time:1}],
            inputVisible: false,
            inputValue: '',
            chess_npc:[{},{},{},{},{},{},{},{},{},{},],
            chess_pc:[{},{},{},{},{},{},{},{},{},{},],
        },
        created: function () {
            this.loadData()
        },
        methods: {
            loadData() {
                this.chess_npc.forEach((item,index) => {
                    item.id=index+1
                    item.active=false
                });
                this.chess_pc.forEach((item,index) => {
                    item.id=index+1
                    item.active=false
                });
            },
            show(id) {
                if (id == 1) {
                    this.showrule = true
                } else if (id == 2) {
                    this.showaward = true
                }

            },
            handleClose(done) {
                this.showrule = false
                this.showaward = false
            },
            onChoose(type,index){
                this.chess_npc.forEach(item => {
                    item.active=false
                });
                this.chess_pc.forEach(item => {
                    item.active=false
                });
                if(type==1){
                    this.chess_npc[index].active=true
                    this.chess_npc.splice(index,1,this.chess_npc[index])
                }else{
                    this.chess_pc[index].active=true
                    this.chess_pc.splice(index,1,this.chess_pc[index])
                }
                
            },
            onSelect(e) {
                let level = modalLevel(e)
                let levelName = ''
                if(level == 0){
                    levelName = '残疾人'
                }else if(level == 1){
                    levelName = '学徒级'
                }else if(level == 2){
                    levelName = '学院级'
                }else if(level == 3){
                    levelName = '神官级'
                }else if(level == 4){
                    levelName = '主教级'
                }else if(level == 5){
                    levelName = '史诗级'
                }else if(level == 6){
                    levelName = '神话级'
                }else if(level == 7){
                    levelName = '主神巅峰'
                }
                
                e.damageup = parseInt(level*(e.str/3)+level)
                e.damagedown = parseInt(1*(e.str/3))
                if(level == 0){
                    e.damageup = parseInt(1*(e.str/3)+1)
                    e.damagedown = 0
                }
                e.hp=parseInt(level*level*3+(e.con/3))
                e.mp=parseInt(level+(e.mag/3))
                e.level = levelName
                e.levelNum = getLevel(e)
                if (e.type == 'npc') { 
                    this.npcData = e
                    this.npcName = e.name

                } else if (e.type == 'pc') {
                    this.plData = e
                    this.plName = e.name
                }
            },
            handleTagClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },
            shanbiPD() {
                this.shanbi = '';
                this.result = '';
                this.gedang = '';
                this.gongji = '';
                this.onSelect(this.plData)
                this.onSelect(this.npcData)
                
                let pllevel = modalLevel(this.plData)
                let npclevel = modalLevel(this.npcData)
                let dexA = this.plData.str*pllevel - this.npcData.str*npclevel
                if (npclevel - pllevel >= 2) {
                    this.gedang = "这是无法战胜的敌人，这不是一个力量层次的战斗"
                    return
                } else if (pllevel - npclevel >= 2) {
                    this.gedang = "此等蝼蚁，蜉蝣撼树"
                    return
                }
                if(npclevel>=6&&  npclevel>pllevel){
                    this.gedang = this.plData.name+",你不应该挑战这种存在"
                    return
                }
                if(pllevel>=6&&pllevel>npclevel){
                    this.gedang = "区区蝼蚁，也敢猖狂"
                    return
                }
                let PD = 100 - (20 + dexA)
                if (PD >= 100) {
                    this.shanbi = 'PD:' + PD + '完美闪避，触发反击'
                } else if (PD <= 0) {
                    this.shanbi = 'PD:' + PD + '无法闪避'
                } else {
                    let x = randomNum(1, 100)
                    if (x > PD) {
                        this.shanbi = '闪避:' + x + ' PD:' + PD + '闪避成功'
                        if (x > 95) {
                            this.shanbi = '闪避:' + x + ' PD:' + PD + '闪避大成功，触发反击'
                        }
                    } else {
                        this.shanbi = '闪避:' + x + ' PD:' + PD + '闪避失败'
                        if (x <= 5) {
                            this.shanbi = '闪避:' + x + ' PD:' + PD + '闪避大失败，被连击'
                        }
                    }
                }
            },
            gedangPD() {
                this.shanbi = '';
                this.result = '';
                this.gedang = '';
                this.gongji = '';
                this.onSelect(this.plData)
                this.onSelect(this.npcData)
                let pllevel = modalLevel(this.plData)
                let npclevel = modalLevel(this.npcData)
                let dexA = this.plData.str * pllevel - this.npcData.str * npclevel
                if (npclevel - pllevel >= 2) {
                    this.gedang = "这是无法战胜的敌人，这不是一个力量层次的战斗"
                    return
                } else if (pllevel - npclevel >= 2) {
                    this.gedang = "此等蝼蚁，蜉蝣撼树"
                    return
                }
                let PD = 100 - (50 + dexA)
                if (PD >= 100) {
                    this.gedang = 'PD:' + PD + '力量压制，四两拨千斤'
                } else if (PD <= 0) {
                    this.gedang = 'PD:' + PD + '无法格挡，惨被摧枯拉朽'
                } else {
                    let x = randomNum(1, 100)
                    if (x > PD) {
                        this.gedang = '格挡:' + x + ' PD:' + PD + '格挡成功，伤害减半'
                        if (x > 95) {
                            this.gedang = '格挡:' + x + ' PD:' + PD + '格挡大成功，不受伤害，触发反击'
                        }
                    } else {
                        this.gedang = '格挡:' + x + ' PD:' + PD + '格挡失败'
                        if (x <= 5) {
                            this.gedang = '格挡:' + x + ' PD:' + PD + '格挡大失败，直接遭受满额伤害'
                        }
                    }
                }
            },
            wljzPD() {
                this.shanbi = '';
                this.result = '';
                this.gedang = '';
                this.gongji = '';
                let pllevel = modalLevel(this.plData)
                let npclevel = modalLevel(this.npcData)
                if (npclevel - pllevel >= 2) {
                    this.gedang = "这是无法战胜的敌人，这不是一个力量层次的战斗"
                    return
                } else if (pllevel - npclevel >= 2) {
                    this.gedang = "此等蝼蚁，蜉蝣撼树"
                    return
                }
                let dexA = this.plData.dex * pllevel - this.npcData.dex * npclevel
                let jzPD = this.jzpd
                let up = this.plData.damageup
                let down = this.plData.damagedown
                let damage = randomNum(down, up)
               
                if(jzPD>=50+dexA){
                    if(jzPD>95){
                        this.gongji = '判定标准：'+(50+dexA)+'精准攻击，满额伤害，大成功恐怖如斯';
                    }
                    else{
                        this.gongji = '判定标准：'+(50+dexA)+' 直接命中，伤害：'+damage;
                    }
                }else{
                    this.gongji = '判定标准：'+(50+dexA)+' 投骰子吧，判定范围1-3，伤害：'+damage;
                    if(jzPD<=5){
                        this.gongji = '判定标准：'+(50+dexA)+'队友预备吧，开始误伤模式了，如果是1,2位判断打空，武器脱手，拾取需要一回合';
                    }
                }
            },
            wlycPD() {
                this.shanbi = '';
                this.result = '';
                this.gedang = '';
                this.gongji = '';
                let pllevel = modalLevel(this.plData)
                let npclevel = modalLevel(this.npcData)
                if (npclevel - pllevel >= 2) {
                    this.gedang = "这是无法战胜的敌人，这不是一个力量层次的战斗"
                    return
                } else if (pllevel - npclevel >= 2) {
                    this.gedang = "此等蝼蚁，蜉蝣撼树"
                    return
                }
                let dexA = this.plData.dex * pllevel - this.npcData.dex * npclevel + 5*pllevel
                let jzPD = this.jzpd
                let up = this.plData.damageup
                let down = this.plData.damagedown
                let damage = randomNum(down, up)*0.8
               
                if(jzPD>=50-dexA){
                    if(jzPD>95){
                        this.gongji = '判定标准：'+(50+dexA)+'精准攻击，满额伤害，大成功恐怖如斯伤害：'+damage;
                    }
                    else{
                        this.gongji = '判定标准：'+(50+dexA)+' 直接命中，伤害：'+damage;
                    }
                }else{
                    this.gongji = '判定标准：'+(50+dexA)+' 投骰子吧，判定范围1-3，伤害：'+damage;
                    if(jzPD<=5){
                        this.gongji = '判定标准：'+(50+dexA)+'队友预备吧，开始误伤模式了，如果是1,2位判断打空，武器脱手，拾取需要一回合,伤害：'+damage;
                    }
                }
            },
            mfjzPD() {
                this.shanbi = '';
                this.result = '';
                this.gedang = '';
                this.gongji = '';
                let pllevel = modalLevel(this.plData)
                let npclevel = modalLevel(this.npcData)
                if (npclevel - pllevel >= 2) {
                    this.gedang = "这是无法战胜的敌人，这不是一个力量层次的战斗"
                    return
                } else if (pllevel - npclevel >= 2) {
                    this.gedang = "此等蝼蚁，蜉蝣撼树"
                    return
                }
                let dexA = this.plData.ler * pllevel - this.npcData.dex * npclevel
                let jzPD = this.jzpd
                let up = this.plData.damageup
                let down = this.plData.damagedown
                let damage = randomNum(parseInt(down),parseInt(up))
                let rank = 1
                let damagebl = damage*rank
                if(jzPD>=50+dexA){
                    if(jzPD>95){
                        this.gongji = '判定标准：'+(50+dexA)+'精准攻击，满额伤害，大成功恐怖如斯,伤害：'+damagebl;
                    }else{
                        this.gongji = '判定标准：'+(50+dexA)+' 直接命中，伤害：'+damagebl;
                    }
                    
                }else{
                    this.gongji = '判定标准：'+(50+dexA)+' 投骰子吧，判定范围1-3，伤害：'+damagebl;
                    if(jzPD<=5){
                        this.gongji = '判定标准：'+(50+dexA)+'队友预备吧，开始误伤模式了，如果是1,2位判断打空，武器脱手，拾取需要一回合,伤害：'+damagebl;
                    }
                }
            },
            mfycPD() {
                this.shanbi = '';
                this.result = '';
                this.gedang = '';
                this.gongji = '';
                let pllevel = modalLevel(this.plData)
                let npclevel = modalLevel(this.npcData)
                if (npclevel - pllevel >= 2) {
                    this.gedang = "这是无法战胜的敌人，这不是一个力量层次的战斗"
                    return
                } else if (pllevel - npclevel >= 2) {
                    this.gedang = "此等蝼蚁，蜉蝣撼树"
                    return
                }
                let dexA = this.plData.ler * pllevel - this.npcData.dex * npclevel
                let jzPD = this.jzpd
                let up = parseInt(pllevel*(this.plData.mag/3)+pllevel)
                let down = parseInt(1*(this.plData.mag/3))
                let damage = randomNum(parseInt(down),parseInt(up))
                let rank = 1
                let damagebl = damage*rank
                
                if(jzPD>=50+dexA){
                    if(jzPD>95){
                        this.gongji = '判定标准：'+(50+dexA)+'精准攻击，满额伤害，大成功恐怖如斯,伤害：'+damagebl+'范围('+up+'-'+down+')';
                    }
                    this.gongji = '判定标准：'+(50+dexA)+' 直接命中，伤害：'+damagebl+'范围('+up+'-'+down+')';
                }else{
                    this.gongji = '判定标准：'+(50+dexA)+' 投骰子吧，判定范围1-3，伤害：'+damagebl+'范围('+up+'-'+down+')';
                    if(jzPD<=5){
                        this.gongji = '判定标准：'+(50+dexA)+'队友预备吧，开始误伤模式了，如果是1,2位判断打空，武器脱手，拾取需要一回合,伤害：'+damagebl+'范围('+up+'-'+down+')';
                    }
                }
            },
            suiji(){
                let result = randomNum(this.start,this.end)
                this.result = result
            }
        }
    })
    //生成从minNum到maxNum的随机数
    function randomNum(minNum, maxNum) {
        switch (arguments.length) {
            case 1:
                return parseInt(Math.random() * minNum + 1, 10);
                break;
            case 2:
                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                //或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum );
                break;
            default:
                return 0;
                break;
        }
    }
    function getLevel(modal) {
        let str = modal.str * 2
        let con = modal.con * 2
        let dex = modal.dex * 2
        let mag = modal.mag * 2
        let chr = modal.chr
        let ler = modal.ler * 1.5
        let total = str + con + dex + mag + chr + ler
        return total

    }
    function modalLevel(modal) {
        let str = modal.str * 2
        let con = modal.con * 2
        let dex = modal.dex * 2
        let mag = modal.mag * 2
        let chr = modal.chr
        let ler = modal.ler * 1.5
        let total = str + con + dex + mag + chr + ler
        if (52.5 > total) {
            return 0
        }
        else if (72.5 > total) {
            return 1
        }
        else if  (122.5 > total) {
            return 2
        }
        else if  (272.5 > total) {
            return 3
        }
        else if  (565 > total) {
            return 4
        }
        else if  (1365 > total) {
            return 5
        }
        else if  (7000 > total) {
            return 6
        }
        else{
            return 7
        }

    }
    function timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = (date.getDate() + 1 < 10 ? '0' + (date.getDate() + 1) : date.getDate() + 1) + ' ';
        var h = (date.getHours() + 1 < 10 ? '0' + (date.getHours() + 1) : date.getHours() + 1) + ':';
        var m = (date.getMinutes() + 1 < 10 ? '0' + (date.getMinutes() + 1) : date.getMinutes() + 1) + ':';
        var s = (date.getSeconds() + 1 < 10 ? '0' + (date.getSeconds() + 1) : date.getSeconds() + 1);
        return Y + M + D + h + m + s;
    }
</script>
<script>
    var canvas,
        ctx,
        width,
        height,
        size,
        lines,
        tick;

    function line() {
        this.path = [];
        this.speed = rand(10, 20);
        this.count = randInt(10, 30);
        this.x = width / 2, +1;
        this.y = height / 2 + 1;
        this.target = {
            x: width / 2,
            y: height / 2
        };
        this.dist = 0;
        this.angle = 0;
        this.hue = tick / 5;
        this.life = 1;
        this.updateAngle();
        this.updateDist();
    }

    line.prototype.step = function (i) {
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed;

        this.updateDist();

        if (this.dist < this.speed) {
            this.x = this.target.x;
            this.y = this.target.y;
            this.changeTarget();
        }

        this.path.push({
            x: this.x,
            y: this.y
        });
        if (this.path.length > this.count) {
            this.path.shift();
        }

        this.life -= 0.001;

        if (this.life <= 0) {
            this.path = null;
            lines.splice(i, 1);
        }
    };

    line.prototype.updateDist = function () {
        var dx = this.target.x - this.x,
            dy = this.target.y - this.y;
        this.dist = Math.sqrt(dx * dx + dy * dy);
    }

    line.prototype.updateAngle = function () {
        var dx = this.target.x - this.x,
            dy = this.target.y - this.y;
        this.angle = Math.atan2(dy, dx);
    }

    line.prototype.changeTarget = function () {
        var randStart = randInt(0, 3);
        switch (randStart) {
            case 0: // up
                this.target.y = this.y - size;
                break;
            case 1: // right
                this.target.x = this.x + size;
                break;
            case 2: // down
                this.target.y = this.y + size;
                break;
            case 3: // left
                this.target.x = this.x - size;
        }
        this.updateAngle();
    };

    line.prototype.draw = function (i) {
        ctx.beginPath();
        var rando = rand(0, 10);
        for (var j = 0, length = this.path.length; j < length; j++) {
            ctx[(j === 0) ? 'moveTo' : 'lineTo'](this.path[j].x + rand(-rando, rando), this.path[j].y + rand(-rando, rando));
        }
        ctx.strokeStyle = 'hsla(' + rand(this.hue, this.hue + 30) + ', 80%, 55%, ' + (this.life / 3) + ')';
        ctx.lineWidth = rand(0.1, 2);
        ctx.stroke();
    };

    function rand(min, max) {
        return Math.random() * (max - min) + min;
    }

    function randInt(min, max) {
        return Math.floor(min + Math.random() * (max - min + 1));
    };

    function init() {
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        size = 30;
        lines = [];
        reset();
        loop();
    }

    function reset() {
        width = Math.ceil(window.innerWidth / 2) * 2;
        height = Math.ceil(window.innerHeight / 2) * 2;
        tick = 0;

        lines.length = 0;
        canvas.width = width;
        canvas.height = height;
    }

    function create() {
        if (tick % 10 === 0) {
            lines.push(new line());
        }
    }

    function step() {
        var i = lines.length;
        while (i--) {
            lines[i].step(i);
        }
    }

    function clear() {
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1';
        ctx.fillRect(0, 0, width, height);
        ctx.globalCompositeOperation = 'lighter';
    }

    function draw() {
        ctx.save();
        ctx.translate(width / 2, height / 2);
        ctx.rotate(tick * 0.001);
        var scale = 0.8 + Math.cos(tick * 0.02) * 0.2;
        ctx.scale(scale, scale);
        ctx.translate(-width / 2, -height / 2);
        var i = lines.length;
        while (i--) {
            lines[i].draw(i);
        }
        ctx.restore();
    }

    function loop() {
        requestAnimationFrame(loop);
        create();
        step();
        clear();
        draw();
        tick++;
    }

    function onresize() {
        reset();
    }

    window.addEventListener('resize', onresize);

    init();

</script>

</html>